<template>
    <div class="page order-page">
        <van-nav-bar title="商家订单" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-tabs v-model="active" @change="changeStatus">
            <van-tab title="全部订单"></van-tab>
            <van-tab title="待发货"></van-tab>
            <van-tab title="待收货"></van-tab>
            <van-tab title="已完成"></van-tab>
        </van-tabs>
        <div class="container">
            <van-list
                    v-model="loading"
                    :error="error"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="loadNext"
            >
                <van-panel
                        v-for="order in orders"
                        :key="order.order_id"
                        :title="order.order_no"
                        :status="orderStatus(order.status)"
                        @click="viewOrder(order.order_id)"
                >
                    <div>
                        <van-card
                                v-for="(item,i) in order.product"
                                :key="i"
                                :num="item.count"
                                :price="item.product_price"
                                desc
                                :title="item.product_title"
                                :thumb="item.product_image"
                        >
                            <div class="goods-price">
                                {{item.product_price}}
                            </div>
                        </van-card>
                    </div>
<!--                    <div slot="footer" class="footer-action" @click.stop="empty">-->
<!--                        <template v-if="order.status==0">-->
<!--                            <van-button size="small" @click="cancelOrder(order.order_id)">取消</van-button>-->
<!--                            &lt;!&ndash; <van-button size="small" type="danger" @click="payOrder(order.order_id)">支付</van-button> &ndash;&gt;-->
<!--                        </template>-->
<!--                        &lt;!&ndash;          <template v-if="order.status > 1">&ndash;&gt;-->
<!--                        &lt;!&ndash;            <van-button size="small" @click="expressOrder(order.order_id)">查看物流</van-button>&ndash;&gt;-->
<!--                        &lt;!&ndash;          </template>&ndash;&gt;-->
<!--                        <template v-if="order.status == 2">-->
<!--                            <van-button size="small" type="info" @click="completeOrder(order.order_id)">确认收货</van-button>-->
<!--                        </template>-->
<!--                        <template v-if="order.status < 0 && order.status > -3">-->
<!--                            <van-button size="small" @click="deleteOrder(order.order_id)">删除</van-button>-->
<!--                        </template>-->
<!--                    </div>-->
                </van-panel>
            </van-list>
        </div>
    </div>
</template>
<script >
    import utils from "../../utils";

    export default {
        name: "member-order",
        data() {
            return {
                active: 0,
                error: false,
                loading: true,
                finished: false,
                page: 1,
                orders: []
            };
        },
        mounted() {
            let status = this.$route.query.status;
            if (status && !isNaN(status)) {
                this.active = status * 1 + 1;
            }
            this.loadOrder();
        },
        methods: {
            onClickLeft() {
                this.$router.back();
            },
            empty() {},
            orderStatus(status) {
                switch (status) {
                    case 0:
                        return "待付款";
                    case 1:
                        return "已付款";
                    case 2:
                        return "待收货";
                    case 3:
                        return "待评价";
                    case 4:
                        return "已完成";
                    case -3:
                        return "退款中";
                    default:
                        return "已失效";
                }
            },
            viewOrder(order_id) {
                this.$router.push("/member/order/detail/merchants?id=" + order_id);
            },
            loadOrder() {
                let status = this.active==3?4:this.active;
                this.loading = true;
                this.error = false
                this.$api
                    .post("manager.order/listOrder", {
                        type: status,
                        page: this.page
                    })
                    .then(json => {
                        this.loading = false;
                        if (json.code == 1) {
                            if (json.data) {
                                this.orders = this.orders.concat(
                                    json.data.map(item => {
                                        item.prduct = utils.fixListImage(item.prduct, "product_image");
                                        return item;
                                    })
                                );

                            }
                            if (

                                !json.data.length
                            ) {
                                this.finished = true;
                            }
                        } else {
                            this.error = true;
                        }
                    })
                    .catch(err => {
                        console.log(err);
                        this.loading = false;
                        this.error = true;
                    });
            },
            loadNext() {
                if(!this.error){
                    this.page++;
                }
                this.loadOrder();
            },
            changeStatus() {
                this.finished = false;
                this.orders = [];
                this.page = 1;
                this.loadOrder();
            },
            cancelOrder(order_id) {
                this.$dialog
                    .confirm({
                        title: "取消订单",
                        message: "确定取消此订单?"
                    })
                    .then(() => {
                        this.$api
                            .post("member.order/cancel", { id: order_id })
                            .then(json => {
                                if (json.code == 1) {
                                    this.$toast.success(json.msg || "操作成功");
                                    this.changeStatus();
                                }
                            })
                            .catch(err => {
                                this.$toast.fail(err.msg || "操作失败");
                            });
                    });
            },
            deleteOrder(order_id) {
                this.$dialog
                    .confirm({
                        title: "删除订单",
                        message: "确定删除此订单?"
                    })
                    .then(() => {
                        this.$api
                            .post("member.order/delete", { id: order_id })
                            .then(json => {
                                if (json.code == 1) {
                                    this.$toast.success(json.msg || "操作成功");
                                    this.changeStatus();
                                }
                            })
                            .catch(err => {
                                this.$toast.fail(err.msg || "操作失败");
                            });
                    });
            },
            payOrder(order_id) {
                this.$dialog
                    .confirm({
                        title: "支付订单",
                        message: "使用微信支付该订单?"
                    })
                    .then(() => {

                        this.$api.wxPay(order_id,'').then(()=>{
                            this.changeStatus();
                        }).catch(()=>{

                        })
                    });
            },
            expressOrder(order_id) {
                console.log(order_id);
                this.$toast("功能开发中~");
            },
            completeOrder(order_id) {
                this.$dialog
                    .confirm({
                        title: "完成订单",
                        message: "确定已收货并完成订单?"
                    })
                    .then(() => {
                        this.$api
                            .post("member.order/confirm", { id: order_id })
                            .then(json => {
                                if (json.code == 1) {
                                    this.$toast.success(json.msg || "操作成功");
                                    this.changeStatus();
                                }
                            })
                            .catch(err => {
                                this.$toast.fail(err.msg || "操作失败");
                            });
                    });
            }
        }
    };
</script>
<style lang="scss">
    .order-page {
        .van-panel {
            margin-top: 20px;
        }
    }
</style>
